<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh">
<!--<![endif]-->
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<head>
    <meta charset="utf-8" />
    <title>保险代理后台管理系统</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <jsp:include page="../common/header.jsp"/>
    <%@include file="../common/taglib.jsp"%>
    <!-- ================== END BASE CSS STYLE ================== -->

    <!-- ================== 单独作用于本页表格td ================== -->
    <style>
        #gadtable>tr>td {
            padding: 10px 15px;
            padding-top: 7px;
            padding-right: 15px;
            padding-bottom: 7px;
            padding-left: 15px;
        }
    </style>
    <!-- ================== 单独作用于本页表格td ================== -->

</head>
<body>
<!-- begin #page-loader -->
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
    <jsp:include page="../common/top.jsp"/>

    <!-- begin #sidebar -->
    <jsp:include page="../common/sitebar.jsp"/>
    <div class="sidebar-bg"></div>
    <!-- end #sidebar -->

    <!-- begin #content -->
    <div id="content" class="content">
        <!-- begin page-header -->
        <h1 class="page-header"> 角色管理 </h1>
        <!-- end page-header -->

        <!-- begin row -->
        <div class="row">
            <div class="col-md-12">

                <ul class="nav nav-tabs">
                    <li class=""><a href="#default-tab-2" data-toggle="tab" onclick="javascript:history.back(-1);">角色列表</a></li>
                    <c:choose>
                        <c:when test="${role.tid!=null}">
                            <li class="active"><a href="#default-tab-1" data-toggle="tab">编辑角色</a></li>
                        </c:when>
                        <c:otherwise>
                            <li class="active"><a href="#default-tab-1" data-toggle="tab">新建角色</a></li>
                        </c:otherwise>
                    </c:choose>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="default-tab-1">
                        <div class="panel panel-inverse" data-sortable-id="form-validation-1">

                            <div class="panel-body">

                                <form role="form" action="/sysrole/add" method="post" data-parsley-validate="true" onsubmit="return check();">
                                    <input type="hidden" class="form-control" name="tid" value="${role.tid}">

                                    <div class="form-group">
                                        <label for="name">部门</label><span id="spanMessage"></span>
                                        <c:choose>
                                            <c:when test="${role.tid!=null}">
                                                <input type="hidden" class="form-control" id="departmentId" name="departmentId" value="${role.departmentId}">
                                                <input type="text" class="form-control input-lg" name="departmentShow" value="${role.departmentName}" disabled="ture">
                                            </c:when>
                                            <c:otherwise>
                                                <select class="form-control" id="departmentId" name="departmentId" onchange="getDataType();">
                                                    <option value="">请选择</option>
                                                    <c:forEach items="${departmentList}" var="dl">
                                                        <option value="${dl.tid}">${dl.officeName}</option>
                                                    </c:forEach>
                                                </select>
                                            </c:otherwise>
                                        </c:choose>
                                        <span id="nameMessage"></span>
                                    </div>

                                    <div class="form-group">
                                        <label for="name">角色名称</label><span id="spanMessage"></span>
                                        <c:choose>
                                            <c:when test="${role.tid!=null}">
                                                <input type="text" class="form-control input-lg" name="name" value="${role.name}" disabled="ture">
                                            </c:when>
                                            <c:otherwise>
                                                <input type="text" class="form-control input-lg" name="name" id="name" value="${role.name}" placeholder="请输入角色名称"  data-parsley-required="true" data-parsley-required-message="角色名称不能为空" data-parsley-maxlength="30"  data-parsley-maxlength-message="角色名称最长为30个" onblur="only()">
                                                <span id="nameMessage"></span>
                                            </c:otherwise>
                                        </c:choose>
                                    </div>

                                    <div class="form-group">
                                        <label for="name">数据范围</label><span id="spanMessage"></span>
                                        <input type="hidden" class="form-control" id="roleLevel" name="roleLevel" value="${role.roleLevel}">
                                        <select class="form-control" id="roleTypeId" name="roleTypeId" onchange="setLevel();">
                                            <option value="">请选择</option>
                                        </select>
                                        <span id="nameMessage"></span>
                                    </div>

                                    <div class="form-group">
                                        <label for="name">角色授权</label>
                                        <table id="gadtable" class="table table-striped table-bordered">
                                            <thead>
                                            <tr>
                                                <th width="100px">顶级菜单</th>
                                                <th>子菜单(<span style="color: blue;">按鈕</span>)</th>
                                            </tr>
                                            </thead>
                                            <c:choose>
                                                <c:when test="${role.tid!=null}">
                                                    <c:forEach items="${rootMenu}" var="rootMenu">
                                                        <tr>
                                                            <td width="100px">
                                                                <div class="checkbox">
                                                                    <label>
                                                                        <c:set var="rmIds">,${rootMenu.tid},</c:set>
                                                                        <input type="checkbox" onclick="oneOnclick(this)" name="idList"  value="${rootMenu.tid}" <c:if test="${ role.authIds.indexOf(rmIds)>-1 }"> checked="checked"</c:if> />
                                                                            ${rootMenu.text}
                                                                    </label>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <c:forEach items="${childMenu}" var="childMenu">
                                                                    <c:if test="${rootMenu.tid == childMenu.parentId}">
                                                                        <div class="checkbox">
                                                                            <label>
                                                                                <c:set var="cmIds">,${childMenu.tid},</c:set>
                                                                                <input type="checkbox" onclick="secondOnclick(this)" name="idList"  value="${childMenu.tid}" <c:if test="${role.authIds.indexOf(cmIds)>-1}"> checked="checked"</c:if>/>${childMenu.text}
                                                                                (
                                                                                <c:forEach items="${childButton}" var="childButton">
                                                                                    <c:if test="${childMenu.tid == childButton.parentId}">
                                                                                        <%----->--%>
                                                                                        <%--<div class="checkbox">--%>
                                                                                        <label>
                                                                                            <c:set var="cbIds">,${childMenu.tid},</c:set>
                                                                                            <input type="checkbox" onclick="thirdOnclick(this)" name="idList" value="${childButton.tid}" <c:if test="${role.authIds.indexOf(cbIds)>-1}"> checked="checked"</c:if> />
                                                                                            <span style="color: blue;">${childButton.text}</span>
                                                                                        </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                                        <%--</div>--%>
                                                                                    </c:if>
                                                                                </c:forEach>
                                                                                )
                                                                            </label>
                                                                        </div>
                                                                    </c:if>
                                                                </c:forEach>
                                                            </td>

                                                        </tr>
                                                    </c:forEach>
                                                </c:when>
                                                <c:otherwise>
                                                    <c:forEach items="${rootMenu}" var="rootMenu">
                                                        <tr>
                                                            <td width="100px">
                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" onclick="oneOnclick(this)" name="idList"  value="${rootMenu.tid}"/>
                                                                            ${rootMenu.text}
                                                                    </label>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <c:forEach items="${childMenu}" var="childMenu">
                                                                    <c:if test="${rootMenu.tid == childMenu.parentId}">
                                                                        <div class="checkbox">
                                                                            <label>
                                                                                <input type="checkbox" onclick="secondOnclick(this)" name="idList"  value="${childMenu.tid}" />${childMenu.text}
                                                                                (
                                                                                <c:forEach items="${childButton}" var="childButton">
                                                                                    <c:if test="${childMenu.tid == childButton.parentId}">
                                                                                        <%----->--%>
                                                                                        <%--<div class="checkbox">--%>
                                                                                        <label>
                                                                                            <input type="checkbox" onclick="thirdOnclick(this)" name="idList" value="${childButton.tid}" />
                                                                                            <span style="color: blue;">${childButton.text}</span>
                                                                                        </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                                        <%--</div>--%>
                                                                                    </c:if>
                                                                                </c:forEach>
                                                                                )
                                                                            </label>
                                                                        </div>
                                                                    </c:if>
                                                                </c:forEach>
                                                            </td>

                                                        </tr>
                                                    </c:forEach>
                                                </c:otherwise>
                                            </c:choose>
                                            <%--<c:forEach items="${rootMenu}" var="rootMenu">
                                                <tr>
                                                    <td width="100px">
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" onclick="oneOnclick(this)" name="idList"  value="${rootMenu.id}"checked="checked"/>
                                                                ${rootMenu.text}
                                                            </label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <c:forEach items="${childMenu}" var="childMenu">
                                                            <c:if test="${rootMenu.id == childMenu.parentId}">
                                                            <div class="checkbox">
                                                                <label>
                                                                    <input type="checkbox" onclick="secondOnclick(this)" name="idList"  value="${childMenu.id} "checked="checked" />${childMenu.text}
                                                                    (
                                                                    <c:forEach items="${childButton}" var="childButton">
                                                                        <c:if test="${childMenu.id == childButton.parentId}">
                                                                        &lt;%&ndash;--->&ndash;%&gt;
                                                                        &lt;%&ndash;<div class="checkbox">&ndash;%&gt;
                                                                            <label>
                                                                                <input type="checkbox" onclick="thirdOnclick(this)" name="idList" value="${childButton.id}" checked="checked" />
                                                                                <span style="color: blue;">${childButton.text}</span>
                                                                            </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                        &lt;%&ndash;</div>&ndash;%&gt;
                                                                        </c:if>
                                                                    </c:forEach>
                                                                    )
                                                                </label>
                                                            </div>
                                                            </c:if>
                                                        </c:forEach>
                                                    </td>

                                                </tr>
                                            </c:forEach>--%>
                                        </table>
                                    </div>
                                    <button type="button" onClick="javascript:history.back(-1);" class="btn btn-default">返回</button>
                                    <button type="submit" class="btn btn-primary">提交</button>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="default-tab-2">
                    <p>
                        <i class="fa fa-spinner fa-stack-2x"></i>
                        &nbsp;
                    </p>
                </div>











        </div>
        <!-- end row -->
    </div>
    <!-- end #content -->

    <!-- begin scroll to top btn -->
    <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
    <!-- end scroll to top btn -->
</div>
<!-- end page container -->
<jsp:include page="../common/footer.jsp"/>


<!-- ================== END PAGE LEVEL JS ================== -->

<script>
    $(document).ready(function() {
        App.init();
        Dashboard.init();
        if($('[name="id"]').val() == ""){
	        $("table tr:gt(0)").each(function(i){
	            $(this).find('input[type=checkbox]').eq(0).attr("checked",true);
	        });     
        }
        <c:if test="${role.tid!=null}">
            getDataType();
        </c:if>
    });

    function oneOnclick(obj) {
        obj = $(obj);
        if(obj.attr("checked")){
            obj.parents('td:first').next().find('input[type=checkbox]').attr("checked",true);
        }else{
            obj.parents('td:first').next().find('input[type=checkbox]').attr("checked",false);
        }
    }

    function secondOnclick(obj) {
        obj = $(obj);
        if(obj.attr("checked")){
            obj.parents('label:first').find('input[type=checkbox]').attr("checked",true);
            obj.parents('td:first').prev().find('input[type=checkbox]').attr("checked",true);
        }else{
            obj.parents('td:first').find('input[type=checkbox]').attr("checked",false);
        }
    }

    function thirdOnclick(obj) {
        obj = $(obj);
        if(obj.attr("checked")){
            obj.parents('div:first').find('input[type=checkbox]').eq(0).attr("checked",true);
            obj.parents('td:first').prev().find('input[type=checkbox]').attr("checked",true);
        }
    }
    function only() {
        var name = $("#name").val();
        jQuery.ajax({
            type:"GET",
            url:"<%=path%>/sysrole/only/"+name,
            dataType:"json",
            success : function(data) {
                if (data.success == false) {
                    $("#name").focus();
                    $("#name").attr("value","");
                    $("#spanMessage").css("color","red");
                    $("#spanMessage").html("(抱歉,此处角色已经添加)");

                }else{
                    $("#spanMessage").html("");
                }
            }
        });
    }
    
    function check() {
    	var result1 = true;
    	var result2 = true;
    	var inputArr = $('input');
    	inputArr.each(function(){ 
    		if("name"==$(this).attr("id")){
    			result1 = patternHtml("name","nameMessage");  
    		}
			if("departmentId"==$(this).attr("id")){
				result2 = patternHtml("description","descriptionMessage");   
    		}
    	}); 
    	if(result1 == true && result2 == true){
    		return true;
    	}else{
    		return false;
    	}
    }
    
    
    function patternHtml(inputId,spanId) {
        var inputValue = $("#"+inputId+"").val();
        var result=inputValue.match("<[^>]*>"); 
        if (result!=null) {
        	$("#"+spanId+"").focus();
        	$("#"+spanId+"").attr("value","");
        	$("#"+spanId+"").css("color","red");
        	$("#"+spanId+"").html("(不可以含有HTML标签)");
            return false;

        }else{
        	$("#"+spanId+"").html("");
            return true;
        }
    }

    function getDataType(){
        var roleDataId = "XXXX";
        <c:if test="${role.tid!=null}">
        roleDataId = "${role.roleTypeId}"
        </c:if>
        var tid = $("#departmentId").val();
        var _data = {};
        _data.tid = tid;
        $.ajax({
            type:"POST",
            dataType:"json",
            async:true,
            url:"${ctx}/sysrole/getDataType",
            data:_data,
            success:function(data){
                $("#roleTypeId").html("");
                $("#roleTypeId").append("<option value=''>请选择</option>");
                if(data.type=="S"){
                    for(var i=0;i<data.dataList.length;i++){
                        if(roleDataId == data.dataList[i].tid){
                            var options = '<option selected="selected" value='+data.dataList[i].tid+' level='+data.dataList[i].roleLevel+'>'+data.dataList[i].officeName+'</option>';
                        }else{
                            var options = '<option value='+data.dataList[i].tid+' level='+data.dataList[i].roleLevel+'>'+data.dataList[i].officeName+'</option>';
                        }
                        $("#roleTypeId").append(options);
                    }
                }
            }
        });
    }
    
    function setLevel() {
        var options=$("#roleTypeId option:selected");
        var rLevel = options.attr("level");
        $("#roleLevel").val(rLevel);
    }

</script>

</body>
</html>
